import React, {useState, useEffect} from 'react'

import {Card, Tabs, Row, Col, Avatar, Tooltip, Space, Divider, Tag, Empty, message, Modal} from 'antd'

import {VerticalAlignTopOutlined, EditOutlined, EllipsisOutlined, ContactsOutlined, ClusterOutlined, BankOutlined, BoldOutlined, GithubOutlined, PhoneOutlined, LikeTwoTone, LikeOutlined, RotateRightOutlined, RotateLeftOutlined, RedEnvelopeTwoTone, StarTwoTone } from '@ant-design/icons'

import defaultSettings from '../../../../defaultSettings.js'

import {Container, ProjectItem} from './style'

import {connect} from 'react-redux'
import {changeUserTabsIndex} from '../../../../store/actionCreators'

import WorkplaceRequest from '../../../../request/workplace_request'
import ArticleRequest from '../../../../request/article_request'

import {baseUrl} from '../../../../https'

const workplace_request = new WorkplaceRequest()
const article_request = new ArticleRequest()

const {TabPane} = Tabs
const { Meta } = Card

function MyCenter(props){
    const {userInfo, userTabsIndex, changeUserTabsIndex} = props

    const [appreciateVisible, setAppreciateVisible] = useState(false)

    const gridStyle = {
        width: 1 / 3 * 100 + '%',
        textAlign: 'center'
    }

    const [oftenVisitList, setOftenVisitList] = useState([
        {
            username: '左右你的',
            avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            desc: '海纳百川有容乃大',
            isTop: true,
            remarkName: '旁观者'
        },
        {
            username: '海盗的雨',
            avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            desc: '暂无',
            isTop: true,
            remarkName: ''
        },
        {
            username: '左右你的',
            avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            desc: '海纳百川有容乃大',
            isTop: false,
            remarkName: '鲁俊'
        },
        {
            username: '左右你的',
            avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            desc: '海纳百川有容乃大',
            isTop: false,
            remarkName: '呵呵哒了'
        }
    ])
    const [projectList, setProjectList] = useState([])

    const appreciateArticle = () => {
        setAppreciateVisible(true)
    }

    const getCollectList = () => {
        workplace_request.getCollectList().then(res => {
            setProjectList(res || [])
        })
    }

    const goToCollect = (id) => {
        window.open(window.location.origin + '/article/detail/' + id)
    }

    const cancelCollect = (id) => {
        workplace_request.cancelCollect({
            id
        }).then(res => {
            message.success('成功取消收藏！')
            getCollectList()
        })
    }

    const moveCollect = (id) => {
        workplace_request.moveCollect({
            id
        }).then(res => {
            res && message.success(res)
            getCollectList()
        })
    }
    const likeArticle = (id) => {
        article_request.likeArticle({
            id
        }).then(res => {
            getCollectList()
        })
    }
    useEffect(() => {
        getCollectList()
    }, [])
    return (
        <Container>
            <div className="left">
                <Card>
                    <div className="user">
                        <Avatar size={80} src={userInfo.avatar || defaultSettings.defaultAvatar}></Avatar>
                        <p className="username">{userInfo.username}</p>
                        <p className="desc">{userInfo.desc}</p>
                        <div className="msg-content">
                            <Space hidden={!userInfo.profession} style={{marginBottom: 8}}>
                                <ContactsOutlined /><span>{userInfo.profession}</span>
                            </Space>
                            <Space hidden={!userInfo.company} style={{marginBottom: 8}}>
                                <ClusterOutlined /><span>{userInfo.company}</span>
                            </Space>
                            <Space hidden={!userInfo.school} style={{marginBottom: 8}}>
                                <BankOutlined /><span>{userInfo.school}</span>
                            </Space>
                            <Space hidden={!userInfo.blog} style={{marginBottom: 8}}>
                                <BoldOutlined /><a href={userInfo.blog} target="_blank">{userInfo.blog}</a>
                            </Space>
                            <Space hidden={!userInfo.github} style={{marginBottom: 8}}>
                                <GithubOutlined /><a href={userInfo.github} target="_blank">{userInfo.github}</a>
                            </Space>
                            <Space hidden={!userInfo.phone} style={{marginBottom: 8}}>
                                <PhoneOutlined /><span>{userInfo.phone}</span>
                            </Space>
                        </div>
                        <Divider dashed />
                        <div className="tag-group">
                            <h4>个人标签</h4>
                            {
                                userInfo.tags && userInfo.tags.split(',').map((item, index) => {
                                    return (
                                        <Tag key={index}>{item}</Tag>
                                    )
                                })
                            }
                        </div>
                    </div>
                </Card>
            </div>
            <div className="right">
                <Card bodyStyle={{padding: '0 24px 24px'}}>
                    <Tabs activeKey={userTabsIndex} size="large" onChange={(key) => changeUserTabsIndex(key)}>
                        <TabPane tab="经常访问" key="1">
                            <Row gutter={16}>
                                {
                                    oftenVisitList.map((item, index) => {
                                        return (
                                            <Col span={8} key={index} style={{marginBottom: 16}}>
                                                <Card actions={[
                                                    <Tooltip placement="top" title={item.isTop ? '取消置顶' : '置顶'}><VerticalAlignTopOutlined key="top" style={{color: item.isTop ? '#eb2f96' : ''}}/></Tooltip>,
                                                    <Tooltip placement="top" title="备注"><EditOutlined key="edit" /></Tooltip>,
                                                    <Tooltip placement="top" title="更多信息"><EllipsisOutlined key="ellipsis" /></Tooltip>,
                                                ]}>
                                                    <Meta
                                                        avatar={
                                                            <Avatar src={item.avatar} />
                                                        }
                                                        title={item.remarkName || item.username}
                                                        description={item.desc}
                                                    />
                                                </Card>
                                            </Col>
                                        )
                                    })
                                }
                            </Row>
                        </TabPane>
                        <TabPane tab="我的收藏" key="2">
                            <Card>
                                {
                                    projectList.length === 0 ? 
                                    <Empty description={false}></Empty>
                                    :
                                    projectList.map((item, index) => {
                                        return (
                                            <Card.Grid style={gridStyle} key={index}>
                                                <ProjectItem>
                                                    <div className="top" onClick={() => goToCollect(item.articleid)}>
                                                        <div className="avatar" style={{background: 'linear-gradient(45deg, #40a9ff, #0050b3)'}}>{item.title.substring(0, 1)}</div>
                                                        <span>{item.title}</span>
                                                    </div>
                                                    <div className="desc" onClick={() => goToCollect(item.articleid)}>
                                                        {item.desc}
                                                    </div>
                                                    <div className="footer">
                                                        {
                                                            item.istop === '0' ? 
                                                            <Tooltip title="展示到工作台" placement="bottom">
                                                                <RotateRightOutlined onClick={() => moveCollect(item.articleid)}/>
                                                            </Tooltip>
                                                            :
                                                            <Tooltip title="从工作台移除" placement="bottom">
                                                                <RotateLeftOutlined style={{color: '#52c41a'}} onClick={() => moveCollect(item.articleid)}/>
                                                            </Tooltip>
                                                        }
                                                        {
                                                            !item.isLike ? 
                                                            <Tooltip title="喜欢" placement="bottom">
                                                                <LikeOutlined onClick={() => likeArticle(item.articleid)}/>
                                                            </Tooltip>
                                                            :
                                                            <Tooltip title="不爱了" placement="bottom">
                                                                <LikeTwoTone twoToneColor="#eb2f96" onClick={() => likeArticle(item.articleid)}/>
                                                            </Tooltip>
                                                        }
                                                        
                                                        <Tooltip title="赞赏作者" placement="bottom">
                                                            <RedEnvelopeTwoTone twoToneColor="#faad14" onClick={appreciateArticle}/>
                                                        </Tooltip>
                                                        <Tooltip title="取消收藏" placement="bottom">
                                                            <StarTwoTone onClick={() => cancelCollect(item.articleid)}/>
                                                        </Tooltip>
                                                    </div>
                                                </ProjectItem>
                                            </Card.Grid>
                                        )
                                    })
                                }
                            </Card>
                        </TabPane>
                    </Tabs>
                </Card>
            </div>
            <Modal
                visible={appreciateVisible}
                title="微信赞赏码"
                footer={null}
                width="360px"
                onCancel={() => setAppreciateVisible(false)}
            >
                <img src={require("../../../../assets/img/zanshang.jpg")} style={{width: '100%'}} alt=""/>
            </Modal>
        </Container>
    )
}

const mapState = (state) => ({
    userInfo: state.userInfo,
    userTabsIndex: state.userTabsIndex
})
const mapDispatch = (dispatch) => ({
    changeUserTabsIndex(data){
		dispatch(changeUserTabsIndex(data))
	}
})


export default connect(mapState, mapDispatch)(MyCenter)